<template>
    <div class="rootMain">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#409EFF"
        >
            <el-menu-item
                class="menuItem"
                v-for="(item, index) in menuList"
                :key="index"
                :index="item.index"
                @click="menuClick(item)"
                >{{ item.name }}</el-menu-item
            >
        </el-menu>

        <!-- 问题库 -->
        <WentikuPage v-if="activeIndex == '1'"></WentikuPage>

        <!-- 税收法规库 -->
        <ShuishouPolicyPage v-if="activeIndex == '2'"></ShuishouPolicyPage>

        <!-- 会计法规库 -->
        <KuaijiPolicyPage v-if="activeIndex == '3'"></KuaijiPolicyPage>

        <!-- 小竹学院 -->
        <SchoolPage v-if="activeIndex == '4'"></SchoolPage>

        <!-- 小竹问答 -->
        <JianghuPage v-if="activeIndex == '5'"></JianghuPage>

        <!-- 模板专区 -->
        <ModelPage v-if="activeIndex == '6'"></ModelPage>

        <!-- 小竹资讯 -->
        <InformationPage v-if="activeIndex == '7'"></InformationPage>
        
        <!-- 企服需求 -->
        <ServiceOrderPage v-if="activeIndex == '8'"></ServiceOrderPage>
        <!-- 企服需求 -->
        <ServiceOrderPage2 v-if="activeIndex == '9'"></ServiceOrderPage2>
    </div>
</template>

<script>
import WentikuPage from '@/components/userCenter/Mycollect/WentikuPage'
import SchoolPage from '@/components/userCenter/Mycollect/SchoolPage'
import JianghuPage from '@/components/userCenter/Mycollect/JianghuPage'
import ModelPage from '@/components/userCenter/Mycollect/ModelPage'
import KuaijiPolicyPage from '@/components/userCenter/Mycollect/KuaijiPolicyPage'
import ShuishouPolicyPage from '@/components/userCenter/Mycollect/ShuishouPolicyPage'
import InformationPage from '@/components/userCenter/Mycollect/InformationPage'
import ServiceOrderPage from '@/components/userCenter/Mycollect/ServiceOrderPage'
import ServiceOrderPage2 from '@/components/userCenter/Mycollect/ServiceOrderPage2'

export default {
    name: 'mycollect',
    props: ['lists'],
    components: {
        WentikuPage,
        SchoolPage,
        JianghuPage,
        ModelPage,
        KuaijiPolicyPage,
        ShuishouPolicyPage,
        InformationPage,
        ServiceOrderPage,
        ServiceOrderPage2
    },
    metaInfo() {
        return {
            title: '个人中心-我的收藏',
            meta: [
                { name: "keywords", content: '小竹,财税,小竹财税' },
            ],
        };
    },
    data() {
        return {
            page: 1,
            limit: 10,
            count: 0,
            changePage: 2,
            activeIndex: '1',
            menuList: [
                {
                    name: '问题库',
                    index: '1',
                },
                {
                    name: '税收法规库',
                    index: '2',
                },
                {
                    name: '会计法规库 ',
                    index: '3',
                },
                {
                    name: '小竹学院',
                    index: '4',
                },
                {
                    name: '小竹问答',
                    index: '5',
                },
                {
                    name: '模板专区',
                    index: '6',
                },
                {
                    name: '小竹资讯',
                    index: '7',
                },
                {
                    name: '企服需求',
                    index: '8',
                },
                {
                    name: '企服商品',
                    index: '9',
                },
                
            ],
        }
    },
    methods: {
        menuClick(item) {
            this.activeIndex = item.index
        },
    },
}
</script>

<style lang="scss" scoped>
@import url('@/assets/static/reset.css');
@import url('@/assets/static/iconfont.css');

.rootMain {
    background-color: #fff;
    margin-left: 20px;

    .collectList {
        position: relative;
        padding: 20px;
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;

        .leaf {
            width: 11px;
            height: 18px;
            margin-right: 2px;
        }
        .leafNum {
            margin-right: 20px;
            color: #ff5900;
            font-size: 18px;
        }

        .title {
            width: 700px;
            font-size: 18px;
        }
        .info {
            font-size: 14px;
            margin-top: 30px;

            .time {
                color: #9e9e9e;
                margin-right: 20px;
            }
            .Effect {
                color: #9e9e9e;
                margin-right: 20px;
            }
        }
        .tips {
            position: absolute;
            top: 47px;
            right: 37px;

            img {
                width: 26px;
                height: 26px;
                vertical-align: middle;
            }
        }
    }
    .page {
        padding-top: 13px;
        padding-bottom: 63px;
        display: flex;
        justify-content: center;
    }
}
</style>
<style lang="scss" scoped>
::v-deep .is-active {
    border-bottom-color: white !important;
}
</style>./mycollect.vue
